<template>
  <div>
    <el-dialog  :title="videoTitle" :visible.sync="videoFlag" width="60%">
      <el-form ref="videoForm" label-width="100px" :model="videoForm" :rules="rules">
        <el-form-item label="视频上传"  >
          <div style="display: flex;">
            <el-input disabled v-model="videoForm.Vurl"></el-input>
            <!-- 隐藏的文件上传框 -->
            <input accept="video/*" ref="myfile" type="file" id="myfile" hidden @change="uploadVideo($event)">
            <el-button type="primary" @click="toSelectVideo"> 添加视频</el-button>
          </div>
        </el-form-item>
          <el-form-item label="视频名称" prop="Vname">
              <el-input v-model="videoForm.Vname"></el-input>
        </el-form-item>
        <el-form-item label="视频时长" prop="Vtime">
              <el-input v-model="videoForm.Vtime"></el-input>
        </el-form-item>
      </el-form>
    <template #footer>
      <div> 
      <el-button type="primary" @click="toAdd">确定</el-button> 
       <el-button type="danger" @click="videoFlag=false">取消</el-button>
      </div>
    </template>
       
    </el-dialog>
  </div>
</template>
<script>
import {uploadVideo,addVideoApi,updateVideoApi} from '@/api/video'
export default {

    data(){
      return {
        videoTitle:"添加视频",
        videoFlag:false,//弹出层显示隐藏
        cacheName:"",//上传成功后 后台返回视频路径
        videoForm:{ //添加视频和修改视频 需要的v-model数据
          ID:"",//编辑时候需要传的参数
          Vname:"",//		视频名称
          Vtime:"",//		视频时长
          Vurl:""//		视频地址
        },
        rules:{
          Vname:[{required:true, message:"请输入视频名称",trigger:"blur"}],
          Vtime:[{pattern:/^\d{1,5}$/, message:"输入数字1-5位",trigger:"blur"}],
        }
      }
    },
    methods:{
      toSelectVideo(){
        //  获取文件上传框 并触发点击事件
         this.$refs.myfile.click()//出发文件上传框的点击
      },
      // 编辑回显功能
      toEdit(row){ //点击编辑回显功能
        this.videoTitle="编辑视频"
        this.videoFlag=true;//弹出层打开
        console.log(row)
        this.videoForm.Vname=row.Vname;
        this.videoForm.Vtime=row.Vtime;
        this.videoForm.Vurl=row.Vurl;
        this.cacheName=row.Vurl;
        this.videoForm.ID=row.ID;//存储编辑需要ID
      },
     async uploadVideo(e){ //文件上传框的 change事件 
        // 获取到选择的文件
        let file=e.target.files[0]//获取到选择的文件
        // 把选中的文件存放到formdata在上传后台
        // 限制视频不能超过500mb
        if(file.size>500*1024*1024){
          this.$message.error("视频不能超过500mb")
          return 
        }
        // 创建一个formdata对象
        let formdata=new FormData()
        // formdata.append("随机key",选择的文件)
        formdata.append(""+new Date().getTime(),file)
        // 调用上传视频接口 
        let res=await uploadVideo(formdata)
        console.log(res,"上传视频接口")
        this.cacheName=res.cacheName; //存储后台返回的路径
        this.videoForm.Vurl=res.cacheName; //存储后台返回的路径
      },
       toAdd(){ //添加视频
      // 表单验证通过
       this.$refs.videoForm.validate(async (vali)=>{
         if(vali){
             if(this.videoForm.Vurl){
                if(this.videoForm.ID){ //调用编辑接口
                    let editRes=await updateVideoApi(this.videoForm)
                    console.log(editRes,"编辑接口")
                    this.$message.success("编辑视频成功")
                }else{
                       // 调用添加接口
                    let res=await addVideoApi(this.videoForm)
                    console.log(res,"-----")
                    this.$message.success("添加视频成功")
                }
                // 关闭弹出层
                this.videoFlag=false;
                // 调用父组件的  刷新列表 
                this.$parent.getList()
                // 标题重置
                this.videoTitle="添加视频"
                
             }else{
               this.$message.error("请先上传视频")
             }
         }
        
       })
      }
    },
    watch:{
      videoFlag(newVal){ //监听弹出层关闭 清理数据
          if(!newVal){
            this.videoForm.ID=""
            this.videoForm.Vname=""
            this.videoForm.Vtime=""
            this.videoForm.Vurl=""
          }

      }
    }
   
}
</script>